// 面向对象：模块化
(function (){
    // 构造函数
    function Tab(options){
        // this -> Tab的实例对象
        this.init(options);// 初始化选项卡
    }
    Tab.prototype = {
        constructor: Tab,// 指正构造器函数
        init: function (options){
            this.h3s = this.$(options.title);
            this.divs = this.$(options.content);
            this.prevIndex = options.index || 0;
            // 设置初始显示项
            this.setClass(this.h3s[this.prevIndex],'active');
            this.setClass(this.divs[this.prevIndex],'show');
            // 添加事件
            this.addEvent();
        },
        $: function (selector){
            // this -> Tab的实例对象
            // this.prevIndex 可以访问实例的属性或方法
            return document.querySelectorAll(selector);
        },
        setClass: function (dom,classn){
            dom.className = classn;
        },
        getIndex: function (){
            return this.prevIndex;
        },
        addEvent: function (){
            // this -> Tab的实例对象
            // 缓冲this指向
            var _this = this;
            for (var i = 0; i < this.h3s.length; i++) {
                // 缓冲每一个选项的索引
                this.h3s[i].index = i;
                // 给每一个选项添加点击事件
                this.h3s[i].onclick = function (){
                    // this -> 点击的那个h3
                    // 清除上次选中项的类名
                    // _this.h3s[_this.prevIndex].className = '';
                    // _this.divs[_this.prevIndex].className = '';
                    _this.setClass(_this.h3s[_this.prevIndex],'');
                    _this.setClass(_this.divs[_this.prevIndex],'');
    
                    // 给当前选中项添加类名
                    // _this.h3s[this.index].className = 'active';
                    // _this.divs[this.index].className = 'show';
                    _this.setClass(_this.h3s[this.index],'active');
                    _this.setClass(_this.divs[this.index],'show');
    
                    // 更新上次选中项的索引
                    _this.prevIndex = this.index;
                }
            }
        }
    }
    /* Tab.prototype = {constructor: Tab}
    // 初始化方法
    Tab.prototype.init = function (options){
        this.h3s = this.$(options.title);
        this.divs = this.$(options.content);
        this.prevIndex = options.index || 0;
        // 设置初始显示项
        this.setClass(this.h3s[this.prevIndex],'active');
        this.setClass(this.divs[this.prevIndex],'show');
        // 添加事件
        this.addEvent();
    }
    // 获取元素方法
    Tab.prototype.$ = function (selector){
        // this -> Tab的实例对象
        // this.prevIndex 可以访问实例的属性或方法
        return document.querySelectorAll(selector);
    }
    // 设置类名方法
    Tab.prototype.setClass = function (dom,classn){
        dom.className = classn;
    }
    // 获取当前选项的索引
    Tab.prototype.getIndex = function (){
        return this.prevIndex;
    }
    // 加事件方法
    Tab.prototype.addEvent = function (){
        // this -> Tab的实例对象
        // 缓冲this指向
        var _this = this;
        for (var i = 0; i < this.h3s.length; i++) {
            // 缓冲每一个选项的索引
            this.h3s[i].index = i;
            // 给每一个选项添加点击事件
            this.h3s[i].onclick = function (){
                // this -> 点击的那个h3
                // 清除上次选中项的类名
                // _this.h3s[_this.prevIndex].className = '';
                // _this.divs[_this.prevIndex].className = '';
                _this.setClass(_this.h3s[_this.prevIndex],'');
                _this.setClass(_this.divs[_this.prevIndex],'');

                // 给当前选中项添加类名
                // _this.h3s[this.index].className = 'active';
                // _this.divs[this.index].className = 'show';
                _this.setClass(_this.h3s[this.index],'active');
                _this.setClass(_this.divs[this.index],'show');

                // 更新上次选中项的索引
                _this.prevIndex = this.index;
            }
        }
    } */

    // 工厂函数（返回创建的实例对象）
    function factory(options){
        return new Tab(options);
    }

    // 对外暴露接口
    window.tab = factory;
})();
